<template>
	<view>
		<view class="header">
			<i class="ri-function-fill" style="color:#7800BE;font-size:12px;"></i>
			<!-- <i-icon size="20upx" color="#7800BE" name="function-fill"></i-icon> -->
			控制台
			<i class="ri-arrow-right-s-line" style="color:#666;font-size:12px;"></i>
			<!-- <i-icon size="20upx" color="#666" name="arrow-right-s-line"></i-icon> -->
			订单管理
			<i class="ri-arrow-right-s-line" style="color:#666;font-size:12px;"></i>
			<!-- <i-icon size="20upx" color="#666" name="arrow-right-s-line"> </i-icon> -->
			财务流水订单
		</view>
		<view class="bl">
			<view class="h1">
				<i class="ri-secure-payment-fill" style="color:#999;font-size:18px;"></i>
				<!-- <i-icon size="30upx" color="#999" name="secure-payment-fill"></i-icon> -->
				财务流水订单
			</view>
		</view>
		<view class="p-table">
			<view class="bc" style="margin-bottom: 10px;">
				<input type="text" v-model="search.keyword" placeholder="输入关键字" />
				<select v-model="search.businessType" class="p-sle">
					<option value="">业务类型</option>
					<option value="DEFAULT">普通交易</option>
					<option value="RECYCLE_WASTE">废旧回收</option>
					<option value="APPOINT_SERVICE">预约服务</option>
				</select>
				<select v-model="search.orderType" class="p-sle">
					<option value="">订单类型</option>
					<option value="1">转出</option>
					<option value="2">转入</option>
					<option value="3">提现</option>
					<option value="4">充值</option>
					<option value="5">分账</option>
				</select>
				<select v-model="search.orderStatus" class="p-sle">
					<option value="">交易状态</option>
					<option value="2">成功</option>
					<option value="3">失败</option>
					<option value="1">处理中</option>
				</select>
				<view class="p-date-box">
					<picker mode="date" @change="selectDate($event,1)" class="p-date">
						<view>{{search.startDate||'开始日期'}}</view>
					</picker>
					<text>到</text>
					<picker mode="date" @change="selectDate($event,2)" class="p-date">
						<view>{{search.endDate||"结束日期"}}</view>
					</picker>
					<button type="button" class="p-btn" @click="search.startDate='';search.endDate='';">重置</button>
				</view>
				<button class="" type="button" @click="searchOrder()">搜索</button>
				<!-- <export-excel name="excel.xls" :data="tree" :fields="excelFields">
					<button class="b-dell">导出表格</button>
				</export-excel> -->
				<button class="b-dell" @click="JsonToExcel(tree,fields)">导出表格</button>
			</view>
			<hr>
			<table class="pure-table pure-table-horizontal">
				<tr>
					<th>订单号</th>
					<th>付款方</th>
					<th>收款方</th>
					<th>交易金额</th>
					<th>交易时间</th>
					<th>交易类型</th>
					<th>交易状态</th>
					<th>业务类型</th>
					<th>操作</th>
				</tr>
				<tr v-for="(item,index) in tree">
					<td v-html="keywordHighlight(item.pono)"></td>
					<td>
						<view class="">
							<view class="" v-html="keywordHighlight(item.payerName)"></view>
							<view class="">{{item.payerAccount}}</view>
						</view>
					</td>
					<td>
						<view class="">
							<view class="" v-html="keywordHighlight(item.payeeName)"></view>
							<view class="">{{item.payeeAccount}}</view>
						</view>
					</td>
					<td><text class="g">￥{{item.amount}}</text></td>
					<td>{{item.createDatetime}}</td>
					<td>{{item.type}}</td>
					<td>
						<view class="sadfasd" v-if="item.status=='成功'">
							<view class="bz">
								<i class="ri-checkbox-circle-fill" style="color:#00aa00;font-size:14px;"></i>
								<!-- <i-icon style="margin-right: 5rpx;" size="24upx" color="#00aa00" name="checkbox-circle-fill"></i-icon> -->
								<text>{{item.status}}</text>
							</view>
						</view>
						<view class="sadfasd" v-if="item.status=='失败'">
							<view class="bz">
								<i class="ri-checkbox-circle-fill" style="color:#ff5500;font-size:14px;"></i>
								<!-- <i-icon style="margin-right: 5rpx;" size="24upx" color="#ff5500" name="checkbox-circle-fill"></i-icon> -->
								<text>{{item.status}}</text>
							</view>
						</view>
						<view class="sadfasd" v-if="item.status=='处理中'">
							<view class="bz">
								<i class="ri-checkbox-circle-fill" style="color:#fecf42;font-size:14px;"></i>
								<!-- <i-icon style="margin-right: 5rpx;" size="24upx" color="#fecf42" name="checkbox-circle-fill"></i-icon> -->
								<text>{{item.status}}</text>
							</view>
						</view>
					</td>
					<td>{{item.businessType}}</td>
					<td>
						<view class="bz">
							<button @click="showDetail(item)" class="r10">详情</button><button @click="receipt(item)"
								class="b-dell">查看电子回单</button>
						</view>
					</td>
				</tr>
				<tr v-if="total==0">
					<td colspan="9" style="text-align: center;color: #838383; ">暂无数据</td>
				</tr>
			</table>
			<view class="bz">
				<Pagination :total="total" :pageSize="size" :nowPage="current" @change="alterCurrent">
				</Pagination>
				<picker mode="selector" :range="[10,20,30,50,100]"
					@change="size=[10,20,30,50,100][$event.detail.value];current=1;searchOrder()" class="p-selector">
					{{size}}条/页
				</picker>
			</view>
		</view>
		<view v-if="detail" class="p-detail">
			<view style="border-bottom:1rpx solid #CCCCCC;height:40rpx;line-height:40rpx;">
				<text style="float: right;margin-right:25rpx;cursor:pointer;" @click="detail=null">关闭</text>
			</view>
			<view class="" style="display: block;overflow:auto;max-height:calc(90vh - 44rpx);">
				<view><text class="p-td">订单号</text> {{detail.pono}}</view>
				<view><text class="p-td">业务</text>{{detail.businessType}}</view>
				<view><text class="p-td">类型</text>{{detail.type}}</view>
				<view><text class="p-td">状态</text>{{detail.status}}</view>
				<view><text class="p-td">交易金额</text>￥{{detail.amount}}</view>
				<view><text class="p-td">付款方</text>{{detail.payerName}}</view>
				<view><text class="p-td">付款方账户</text>{{detail.payerAccount}}</view>
				<view><text class="p-td">收款方</text>{{detail.payeeName}}</view>
				<view><text class="p-td">收款账户</text>{{detail.payeeAccount}}</view>
				<!-- <view><text class="p-td">操作员(站长)</text>{{detail.checkerName}}</view> -->
				<view><text class="p-td">交易时间</text>{{detail.createDatetime}}</view>
				<view><text class="p-td">备注</text>{{detail.memo}}</view>
				<view v-for="(one,no) in detail.recycleList" style="border:1rpx solid #C2C2C2;margin:10rpx 40rpx;">
					<view><text class="p-td">回收项目({{no+1}})</text>{{one.recycleName}}</view>
					<view><text class="p-td">单价</text>￥{{one.price}}/{{one.unit}}</view>
					<view><text class="p-td">数量</text>{{one.quantity}}{{one.unit}}</view>
					<view><text class="p-td">价额</text>￥{{MUL(one.price,one.quantity)}}</view>
				</view>
				<view v-for="(one,no) in detail.appointList" style="border:1rpx solid #C2C2C2;margin:10rpx 40rpx;">
					<view><text class="p-td">预约ID</text> {{one.id}}</view>
					<view><text class="p-td">预约服务</text>{{one.serviceName}}</view>
					<view><text class="p-td">预约人姓名</text>{{one.userName}}</view>
					<view><text class="p-td">手机号</text>{{one.phone}}</view>
					<view><text class="p-td">预约日期</text>{{one.serviceDate}}</view>
					<view><text class="p-td">预约地点</text>{{one.serviceSite}}</view>
					<view><text class="p-td">所属物业</text>{{one.propertyName}}</view>
					<view><text class="p-td">状态</text>{{one.state}}</view>
					<view><text class="p-td">类型</text>{{one.type}}</view>
					<view><text class="p-td">费用</text>{{one.price}}{{one.unit}}</view>
					<view><text class="p-td">创建日期</text>{{one.createDatetime}}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	let that;
	import Pagination from "@/components/pagination.vue";
	import exportExcel from "@/components/json-2-excel/Json2Excel.vue";
	import XLSX from '../../components/xlsx.core.min.js';
	export default {
		components: {
			Pagination,
			exportExcel,
			XLSX
		},
		data() {
			return {
				tree: [],
				pages: 0,
				total: 0,
				current: 1,
				size: 10,
				search: {
					businessType: '',
					orderType: '',
					orderStatus: '',
					startDate: '',
					endDate: '',
					keyword: ''
				},
				detail: null,
				excelFields: {
					'流水号': 'pono',
					'交易类型': 'type',
					'交易状态': 'status',
					'交易金额(元)': 'amount',
					'付款方': 'payerName',
					'付款账户': 'payerAccount',
					'收款方': 'payeeName',
					'收款账户': 'payeeAccount',
					'交易时间': 'createDatetime'
				},
				fields: {
					'pono': '流水号',
					'type': '交易类型',
					'status': '交易状态',
					'amount': '交易金额(元)',
					'payerName': '付款方',
					'payerAccount': '付款账户',
					'payeeName': '收款方',
					'payeeAccount': '收款账户',
					'createDatetime': '交易时间'
				}
			}
		},
		methods: {
			MUL(num1, num2) {
				return (parseFloat(num1) * parseFloat(num2)).toFixed(2);
			},
			//获取订单列表
			getOrderList(current, size, search) {
				current = (current && current > 0) ? current : 1
				size = (size && size >= 10) ? size : 10;
				let params = "";
				if (search) {
					for (let key in search) {
						if (search[key]) {
							params += ("&" + key + "=" + search[key]);
						}
					}
				}
				let _this = this
				this.httpRequest({
					url: '/admin/order/list?current=' + current + '&size=' + size + params,
					method: 'GET',
					fn(data) {
						_this.tree = data.records
						_this.pages = data.pages
						_this.total = parseInt(data.total)
						_this.current = parseInt(data.current)
						_this.size = parseInt(data.size)
						for (let i in _this.tree) {
							let item = _this.tree[i]
							// item.pono = '\'' + item.pono
							// item.payerAccount = '\'' + item.payerAccount
							// item.payeeAccount = '\'' + item.payeeAccount
							item.createDatetime = item.createDatetime.substring(0, 16)
						}
					}
				})
			},
			alterCurrent(c) {
				this.getOrderList(c, this.size)
			},
			searchOrder() {
				this.getOrderList(1, this.size, this.search)
			},
			selectDate(e, i) {
				if (1 == i) {
					this.search.startDate = e.target.value
				} else if (2 == i) {
					this.search.endDate = e.target.value
				}
			},
			/**
			 * 关键字高亮
			 * @param {String} content 内容
			 */
			keywordHighlight(content) {
				if (content && this.search.keyword) {
					let reg = new RegExp(this.search.keyword, "g");
					content = content.replace(reg, `<font color="#428eff">${this.search.keyword}</font>`)
				}
				return content;
			},
			//获取回执单
			receipt(order) {
				this.httpRequest({
					url: '/admin/order/receipt',
					method: 'GET',
					data: {
						'orderId': order.id,
						'payerId': order.payerId,
						'payerAccount': order.payerAccount
					},
					fn(data) {
						// console.log("回执单：",data)
						window.open(data.downloadUrl)
					}
				})
			},
			/**
			 *导出表格
			 * @param {JsonArray} jsonArr 数据
			 * @param {JsonObject} fields 要导出的字段
			 */
			JsonToExcel(jsonArr, fields, confirm) {
				/* if (!confirm) {
					uni.showModal({
						content: '该功能在测试中，确认使用该功能吗？',
						success: (res) => {
							if (res.confirm) {
								that.JsonToExcel(jsonArr, fields, true)
							}
						}
					})
					return;
				} */
				let data = [];
				let headers = []
				for (let field in fields) {
					headers.push(fields[field])
				}
				data.push(headers)
				for (let i in jsonArr) {
					let line = []
					for (let field in fields) {
						line.push(jsonArr[i][field] || '');
					}
					data.push(line);
				}
				// console.log("导出表格数据：", data)
				let sheet = XLSX.utils.aoa_to_sheet(data)
				XLSX.downloadBlob(XLSX.sheet2blob(sheet), (new Date().getTime() + '.xlsx'))
			},
			//显示详情
			showDetail: function(item) {
				if (!item.appointList && item.businessType == "预约服务") {
					//如果是付费预约的订单则查询该预约
					this.httpRequest({
						url: '/admin/service/appoint/getByOrderId?orderId=' + item.id,
						method: "GET",
						fn(data) {
							// console.log("预约", data)
							if (!data.serviceDate) {
								data.serviceDate = '[工作日]'
							}
							item['appointList'] = [data]
							that.detail = item
							for (let k in that.tree) {
								if (that.tree[k].id == item.id) {
									that.tree[k]['appointList'] = [data]
									break;
								}
							}
						}
					})
				} else if (!item.recycleList && item.businessType == '回收废旧') {
					//如果是回收废旧的订单则查询该回收
					this.httpRequest({
						url: '/admin/order/getRecycleByOrderId?orderId=' + item.id,
						method: "GET",
						fn(data) {
							// console.log("回收列表",data)
							item['recycleList'] = data
							that.detail = item
							for (let k in that.tree) {
								if (that.tree[k].id == item.id) {
									that.tree[k]['recycleList'] = data
									break;
								}
							}
						}
					})
				} else {
					that.detail = item;
				}
			}
		},
		onLoad() {
			that = this;
			this.getOrderList()
		}
	}
</script>
